<template>
  <div class="customer">
    <div>
      <el-row class="bgc">
        <el-col :span="24">客户基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="loanInfo" :inline="true">
        <el-form-item label="担保人姓名">
          <el-input v-model="loanInfo.name" disabled />
        </el-form-item>
        <el-form-item label="典型人物类型">
          <el-input v-model="loanInfo.type" disabled />
        </el-form-item>
        <el-form-item label="本人身份证号码">
          <el-input v-model="loanInfo.idNo" disabled> </el-input>
        </el-form-item>
        <el-form-item label="现居地址">
          <el-input v-model="loanInfo.currentAddress" disabled> </el-input>
        </el-form-item>
        <el-form-item label="居住情况">
          <el-input v-model="loanInfo.livingCondition" disabled />
        </el-form-item>
        <el-form-item label="居住年限">
          <el-input v-model="loanInfo.livingYears" disabled />
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="loanInfo.career" disabled> </el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="loanInfo.education" disabled> </el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="loanInfo.nation" disabled> </el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="loanInfo.phone" disabled> </el-input>
        </el-form-item>
        <el-form-item label="月收入">
          <el-input v-model="loanInfo.monthly" disabled> </el-input>
        </el-form-item>
        <el-form-item label="是否公积金">
          <el-switch v-model="loanInfo.accumulationFund" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否我行工资代发">
          <el-switch v-model="loanInfo.payBank" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否我行信用卡">
          <el-switch v-model="loanInfo.creditCard" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否有社保">
          <el-switch v-model="loanInfo.socialSecurity" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-switch v-model="loanInfo.workUnit" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否为共借">
          <el-switch v-model="loanInfo.jointBorrowing" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="担保人婚姻状况">
          <el-input v-model="loanInfo.maritalStatus" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶证件类型">
          <el-input v-model="loanInfo.mateIdType" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶身份证号码">
          <el-input v-model="loanInfo.mateIdNo" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶姓名">
          <el-input v-model="loanInfo.mateName" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶手机号码">
          <el-input v-model="loanInfo.matePhone" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶户籍地址">
          <el-input v-model="loanInfo.mateAddress" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶是否有工作单位">
          <el-switch v-model="loanInfo.mateWork" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="配偶单位名称">
          <el-input v-model="loanInfo.mateWorkName" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶单位性质">
          <el-input v-model="loanInfo.mateWorkType" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶月收入">
          <el-input v-model="loanInfo.mateMonthly" disabled> </el-input>
        </el-form-item>
        <el-form-item label="配偶授权验证码">
          <el-input v-model="loanInfo.mateMandate" disabled> </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">行业类型</el-col>
      </el-row>
      <el-row class="bgc">
        <el-col :span="24">共同填写人信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="togetherInfoList" :inline="true">
        <el-form-item label="姓名">
          <el-input v-model="togetherInfoList.name" disabled />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="togetherInfoList.age" disabled />
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input v-model="togetherInfoList.birthday" disabled> </el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-input v-model="togetherInfoList.idType" disabled> </el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="togetherInfoList.idNo" disabled />
        </el-form-item>
        <el-form-item label="户籍地址">
          <el-input v-model="togetherInfoList.domicileAddress" disabled />
        </el-form-item>
        <el-form-item label="现居地址">
          <el-input v-model="togetherInfoList.currentAddress" disabled> </el-input>
        </el-form-item>
        <el-form-item label="居住情况">
          <el-input v-model="togetherInfoList.livingCondition" disabled> </el-input>
        </el-form-item>
        <el-form-item label="与人关系">
          <el-input v-model="togetherInfoList.relationship" disabled> </el-input>
        </el-form-item>

        <el-form-item label="是否公积金">
          <el-switch v-model="togetherInfoList.accumulationFund" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否我行信用卡">
          <el-switch v-model="togetherInfoList.creditCard" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否我行工资代发">
          <el-switch v-model="togetherInfoList.payBank" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否有社保">
          <el-switch v-model="togetherInfoList.socialSecurity" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-switch v-model="togetherInfoList.workUnit" class="mb-2" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="当地居住年限">
          <el-input v-model="togetherInfoList.livingYears" disabled> </el-input>
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="togetherInfoList.career" disabled> </el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="togetherInfoList.education" disabled> </el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="togetherInfoList.phone" disabled> </el-input>
        </el-form-item>
        <el-form-item label="短信">
          <el-input v-model="togetherInfoList.message" disabled> </el-input>
        </el-form-item>
        <el-form-item label="月收入">
          <el-input v-model="togetherInfoList.monthly" disabled> </el-input>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="togetherInfoList.workName" disabled> </el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="togetherInfoList.work" disabled> </el-input>
        </el-form-item>
        <el-form-item label="单位电话">
          <el-input v-model="togetherInfoList.workPhone" disabled> </el-input>
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-input v-model="togetherInfoList.maritalStatus" disabled> </el-input>
        </el-form-item>
        <el-form-item label="授权验证码">
          <el-input v-model="togetherInfoList.mandate" disabled> </el-input>
        </el-form-item>
      </el-form>
      <el-row class="bgc">
        <el-col :span="24"> 影像采集</el-col>
      </el-row>
      <div class="box_flex">
        <div class="box" v-for="(item, index) in srcList" :key="index">
          <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
          <div v-else class="img_box">暂无图片</div>
        </div>
      </div>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">家庭信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="loanInfo" :inline="true">
        <el-form-item label="家庭年收入">
          <el-input v-model="loanInfo.familyYearly" disabled />
        </el-form-item>
        <el-form-item label="家庭月收入">
          <el-input v-model="loanInfo.familyMonthly" disabled />
        </el-form-item>
        <el-form-item label="资产指数">
          <el-input v-model="loanInfo.assetIndex" disabled />
        </el-form-item>
        <el-form-item label="家庭其他债务月">
          <el-input v-model="loanInfo.debtMonth" disabled />
        </el-form-item>
        <el-form-item label="家庭总欠条">
          <el-input v-model="loanInfo.debtAll" disabled />
        </el-form-item>
        <el-form-item label="灵敏比">
          <el-input v-model="loanInfo.sensitivityRatio" disabled />
        </el-form-item>
      </el-form>
      <!-- <el-row class="bgc">
        <el-col :span="24"> 影像采集</el-col>
      </el-row>
      <div class="box_flex">
        <div class="box" v-for="(item, index) in imgList" :key="index">
          <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
          <div v-else class="img_box">暂无图片</div>
        </div>
      </div> -->
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">业务信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="loanInfo" :inline="true">
        <el-form-item label="担保用途">
          <el-input v-model="loanInfo.loanUse" disabled type="textarea" />
        </el-form-item>
        <el-form-item label="担保用途说明">
          <el-input v-model="loanInfo.loanUseDesc" disabled type="textarea" />
        </el-form-item>
        <el-form-item label="还款来源">
          <el-input v-model="loanInfo.loanSource" disabled type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">个人资产情况</el-col>
      </el-row>
      <div v-for="(item, index) in houseInfoList" :key="index">
        <el-row class="bgc">
          <el-col :span="24"> 房产信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="140px" :model="item.houseInfo" :inline="true">
          <el-form-item label="产权编号">
            <el-input v-model="item.houseInfo.no" disabled />
          </el-form-item>
          <el-form-item label="登记日期">
            <el-input v-model="item.houseInfo.registerDate" disabled />
          </el-form-item>
          <el-form-item label="土地使用终止日期">
            <el-input v-model="item.houseInfo.endDate" disabled />
          </el-form-item>
          <el-form-item label="面积(平方米)">
            <el-input v-model="item.houseInfo.area" disabled />
          </el-form-item>
          <el-form-item label="房产性质">
            <el-input v-model="item.houseInfo.property" disabled />
          </el-form-item>
          <el-form-item label="房产详细地址">
            <el-input v-model="item.houseInfo.address" disabled />
          </el-form-item>
          <el-form-item label="土地性质">
            <el-input v-model="item.houseInfo.landProperty" disabled />
          </el-form-item>
          <el-form-item label="评估价值(人工)">
            <el-input v-model="item.houseInfo.appraised" disabled />
          </el-form-item>
          <el-form-item label="房屋结构">
            <el-input v-model="item.houseInfo.build" disabled />
          </el-form-item>
        </el-form>
        <!-- <el-row class="bgc">
          <el-col :span="24"> 影像采集</el-col>
        </el-row>
        <div class="box_flex">
          <div class="box">
            <el-image
              :src="`http://116.228.78.26:52800/nymanagerFile/${item.houseInfo.imgPath}`"
              lazy
              style="width: 200px; height: 200px"
              v-if="item.houseInfo.imgPath != '' && item.houseInfo.imgPath != null"
            />
            <div v-else class="img_box">暂无图片</div>
          </div>
        </div> -->
        <!-- <el-image v-for="url in urls" :key="url" :src="url" lazy /> -->
        <el-row class="bgc">
          <el-col :span="24"> 权利人信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="140px" :model="item.ownerList[0]" :inline="true">
          <el-form-item label="权属情况">
            <el-input v-model="item.ownerList[0].ownership" disabled />
          </el-form-item>
          <el-form-item label="权利人名称">
            <el-input v-model="item.ownerList[0].name" disabled />
          </el-form-item>
          <el-form-item label="权利人证件号">
            <el-input v-model="item.ownerList[0].idNo" disabled />
          </el-form-item>
          <el-form-item label="房产份额">
            <el-input v-model="item.ownerList[0].share" disabled />
          </el-form-item>
        </el-form>
      </div>

      <div v-for="(item, index) in carInfoList" :key="index">
        <el-row class="bgc">
          <el-col :span="24"> 车辆信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="140px" :model="item" :inline="true">
          <el-form-item label="合计购买价格(元)">
            <el-input v-model="item.totalPrice" disabled />
          </el-form-item>
          <el-form-item label="合计担保余额(元)">
            <el-input v-model="item.totalLoan" disabled />
          </el-form-item>
          <el-form-item label="所有权人">
            <el-input v-model="item.owner" disabled />
          </el-form-item>
          <el-form-item label="品牌型号">
            <el-input v-model="item.brand" disabled />
          </el-form-item>
          <el-form-item label="购买时间">
            <el-input v-model="item.buyDate" disabled />
          </el-form-item>
          <el-form-item label="购买价格">
            <el-input v-model="item.buyPrice" disabled />
          </el-form-item>
          <el-form-item label="担保余额(元)">
            <el-input v-model="item.loan" disabled />
          </el-form-item>
          <el-form-item label="车牌号码">
            <el-input v-model="item.carNo" disabled />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { nextTick, reactive, ref } from "vue";
import router from "@/router";

const route = useRoute();
const labelPosition = ref("right");
const state = reactive({
  loanInfo: {}, //担保信息
  togetherInfoList: {},
  formLabelAlign: {},
  houseInfoList: {},
  ownerList: {},
  imgList: {},
  srcList: {},
  carInfoList: {},
  lists: [], //展示菜单项
});
const { loanInfo, togetherInfoList, houseInfoList, ownerList, carInfoList, imgList,srcList } = toRefs(state);

const props = defineProps({
  dataFrom: {
    type: Object,
    required: true,
  },
});
onMounted(() => {
  setTimeout(() => {
    loanInfo.value = props.dataFrom.customInfo;
    togetherInfoList.value = props.dataFrom.togetherInfoList[0];
    carInfoList.value = props.dataFrom.carInfoList;
    houseInfoList.value = props.dataFrom.houseInfoList;
    // ownerList.value = props.dataFrom.houseInfoList[0].ownerList[0];
    console.log(ownerList.value, "ownerList.value");
    if (loanInfo.value.imgPath != null && loanInfo.value.imgPath != "") {
      imgList.value = loanInfo.value.imgPath.split(",");
    } else {
      loanInfo.value.imgPath = "";
      imgList.value = loanInfo.value.imgPath.split(",");
    }

    if (togetherInfoList.value.imgPath != null && togetherInfoList.value.imgPath != "") {
      srcList.value = togetherInfoList.value.imgPath.split(",");
    } else {
      togetherInfoList.value.imgPath = "";
      srcList.value = togetherInfoList.value.imgPath.split(",");
    }

  }, 400);
});
</script>
<style lang="scss" scoped>
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}
:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}
</style>
